<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="../../style/login/login.css">
    <link rel="short cut" href="../../favicon.ico"/>
    <!-- <link href="css/login.css" rel="stylesheet"> -->
    <script type="text/javascript" src="../../plugins/jQuery/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../../plugins/vue/vue.js"></script>
    <script type="text/javascript" src="../../plugins/axios/axios.js"></script>
    <script type="text/javascript" src="../../plugins/layer-master/dist/layer.js"></script>
</head>

<body>
<div id="app">
    <form id="form" method="post">
        <h1 id="loginMsg">LOGIN IN</h1>
        <span style="color: white">{{error}}</span>
        <p><label for="username">Username:</label><input id="username" v-model="username" name="username" type="text"
                                                         autocomplete="off">
        </p>

        <p><label for="password">Password:</label><input id="password" v-model="password" name="password"
                                                         type="password" @keyup.enter="login"></p>
        <div id="subDiv">
            <input type="button" @click="login" class="loginButton" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
        </div>
    </form>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            username: "",
            password: "",
            error: ''
        },
        methods: {
            login() {
                let data = new URLSearchParams()
                data.append('username', this.username)
                data.append('password', this.password)
                axios({
                    method: 'post',
                    url: 'http://localhost:8000/user/login',
                    data: data
                }).then(resp => {
                    if (resp.data.success) {
                        localStorage.setItem('front_token', resp.data.data)
                        location.href = '../../index.html'
                    } else {
                        this.error = resp.data.message
                    }
                })
            }
        }
    })
</script>

</body>
</html>